<!DOCTYPE html>
<html lang="ko-KR" class="react-fullpage__parents">

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Cache-Control" content="max-age=3600">
  <meta http-equiv="Expires" content="Thu, 31 Dec 2025 23:59:59 GMT">
  <meta name="title" content="NIGHT CROWS">
  <link rel="icon" href="favicon.ico" />
  <title>DeepFake</title>
  <meta name="facebook-domain-verification" content="v06l4mcqn66djauwh8uufoe5qgjsol">
  <meta name="google" content="notranslate">
  <meta name="facebook-domain-verification" content="v06l4mcqn66djauwh8uufoe5qgjsol" />
  <meta name="google" content="notranslate" />
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/index.css" data-n-g="" />
  <link rel="stylesheet" href="assets/css/swiper.min.css" data-n-g="" />
  <script src="assets/js/jquery-3.3.1.min.js"></script>
  <script src="assets/js/swiper.min.js"></script>
  <script src="assets/js/swiper.animate1.0.3.min.js"></script>
  <script src="assets/js/initialize.js"></script>
</head>

<body>
  <div id="app">
    <div id="header"></div>
    <div class="body">
      <div id="left_nav"></div>
      <div class="box">
        <div class="content">
          <div class="top-img">
            <img src="./assets/img/index/pic1.webp" alt="">
            <img src="./assets/img/index/pic1.webp" alt="">
            <img src="./assets/img/index/pic1.webp" alt="">
            <img src="./assets/img/index/pic1.webp" alt="">
            <img src="./assets/img/index/pic1.webp" alt="">
            <img src="./assets/img/index/pic1.webp" alt="">
            <img src="./assets/img/index/pic1.webp" alt="">
            <img src="./assets/img/index/pic1.webp" alt="">
          </div>
		<div class="swiper">
				<div class="swiper-box">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="slide-box">
								<img src="assets/img/index/1.png" alt="">
								<span>1</span>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="slide-box">
								<img src="assets/img/index/1.png" alt="">
								<span>2</span>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="slide-box">
								<img src="assets/img/index/1.png" alt="">
								<span>3</span>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="slide-box">
								<img src="assets/img/index/1.png" alt="">
								<span>4</span>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="slide-box">
								<img src="assets/img/index/1.png" alt="">
								<span>5</span>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="slide-box">
								<img src="assets/img/index/1.png" alt="">
								<span>6</span>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="slide-box">
								<img src="assets/img/index/1.png" alt="">
								<span>7</span>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="slide-box">
								<img src="assets/img/index/1.png" alt="">
								<span>8</span>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="slide-box">
								<img src="assets/img/index/1.png" alt="">
								<span>9</span>
							</div>
						</div>
					</div>
					<div class="swiper-button-next"></div>
					<div class="swiper-button-prev"></div>
				</div>
		</div>
          <div class="top-sp">
            <div class="tit">
              인기 콘텐츠
            </div>
          </div>
          <div class="group-list">
            <div class="page_ttl only_pc">
              <img src="assets/svg/profile/icon-fire.svg" alt="">
              최 신
            </div>
            <div class="group-img">
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="more-btn show-more-btn">
                <hr>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path
                    d="M8.00787 11.2939C8.27563 11.2939 8.54339 11.2165 8.73464 11.0229L13.7073 6.76342C14.2046 6.33748 14.2428 5.60175 13.8603 5.13708C13.4395 4.63369 12.7128 4.59497 12.2538 4.98219L8.00787 8.6221L3.76199 4.98219C3.26473 4.55625 2.53796 4.63369 2.15544 5.13708C1.73468 5.64047 1.81118 6.3762 2.30845 6.76342L7.2811 11.0229C7.47236 11.2165 7.74011 11.2939 8.00787 11.2939Z"
                    fill="#F37021" />
                </svg>
                <span>더 보기</span>
                <hr>
              </div>
              <!-- <button class="show-more-btn">更多图片</button> -->
            </div>
          </div>
          <div class="group-list">
            <div class="page_ttl only_pc">
              <img src="assets/svg/profile/icon-fire.svg" alt="">
              딥페이크
            </div>
            <div class="group-img">
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="image-item">
                <img src="assets/img/index/group-img.png" alt="">
              </div>
              <div class="more-btn show-more-btn">
                <hr>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path
                    d="M8.00787 11.2939C8.27563 11.2939 8.54339 11.2165 8.73464 11.0229L13.7073 6.76342C14.2046 6.33748 14.2428 5.60175 13.8603 5.13708C13.4395 4.63369 12.7128 4.59497 12.2538 4.98219L8.00787 8.6221L3.76199 4.98219C3.26473 4.55625 2.53796 4.63369 2.15544 5.13708C1.73468 5.64047 1.81118 6.3762 2.30845 6.76342L7.2811 11.0229C7.47236 11.2165 7.74011 11.2939 8.00787 11.2939Z"
                    fill="#F37021" />
                </svg>
                <span>더 보기</span>
                <hr>
              </div>
              <!-- <button class="show-more-btn">更多图片</button> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div id="footer"></div> -->
  </div>
  <style>
    .top-img {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }

    .top-img img {
      flex: 0 0 16%;
    }

    .top-sp {
      display: flex;
      margin-top: 32px;
    }

    .top-sp .tit {
      flex: 0 0 100%;
      font-size: 24px;
      color: #fff;
      font-weight: 800;
    }

    .page_ttl {
      padding-left: 10px;
      display: flex !important;
      gap: 10px;
      align-items: center;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      margin: 20px 0;
      text-align: left;
      background: linear-gradient(180deg, #2C2C2C 0%, #2C2C2C 49%, #222 51%, #222 100%);
      box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .1), 0px 1px 3px rgba(0, 0, 0, 0.9);
    }

    .page_ttl img {
      margin-right: 10px;
    }

    .page_ttl span {
      color: #254EFF;
      font-family: "Alibaba PuHuiTi";
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
    }

    .group-img {
      gap: 10px;
      display: flex;
      flex-wrap: wrap;
    }


    .more-btn {
      cursor: pointer;
      margin-top: 51px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }

    .more-btn hr {
      width: 45%;
      border: 1px solid #F37021;
    }

    .image-item {
      flex: 0 0 calc(25% - 10px);
      overflow: hidden;
      border-radius: 8px;
      transition: opacity 0.3s ease;
      display: none;
      /* 默认隐藏所有图片 */
    }

    .image-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 保持比例并填满容器 */
      transition: transform 0.3s ease;
    }

    /* 默认显示前3张图片（可自定义数量） */
    .image-item:nth-child(-n+8) {
      display: block;
    }

    .image-item:hover img {
      transform: scale(1.05);
      /*  hover 放大效果 */
    }

    /* 更多按钮样式 */
	.swiper {
		width: 100%;
		height: 248px;
		margin: 20px 0;
		padding: 0 10%;
		overflow: hidden;
		position: relative;

	}
	.swiper .box {
		width: 100%;
		height: 248px;
		position: relative;
	}
	.swiper-box {
		overflow: hidden;
	}
	.swiper .swiper-slide {
		position: relative;
		text-align: center;
	}
	.swiper .swiper-slide .slide-box{
		display: inline-block;
		position: relative;
	}
	.swiper .swiper-slide img {
		display: inline-block;
	}
	.swiper-wrapper {
		/* padding:  0 40px; */
	}
	.swiper-button-prev,.swiper-button-next {
		width: 40px;
		height: 100px;
		margin-top: -50px;
		background-color: rgba(255,255,255,0.1);
		border-radius: 10px;
	}
	.swiper-button-prev {
		left: 5%;
	}
	.swiper-button-next {
		right: 5%;
	}
	.swiper-button-prev::after {
		font-size: 14px;
		color: #fff;
	}
	.swiper-button-next::after {
		font-size: 14px;
		color: #fff;
	}
	.swiper span {
      	font-family: "Microsoft Yahei";
		font-size: 100px;
		color: #000;
		font-weight: bold;
		position: absolute;
		left: -35px;
		bottom: 0;
		/* 标准写法 */
		-webkit-text-stroke: 1px #fff;  /* 宽度 颜色 */
		text-stroke: 1px #fff;

  /* 支持渐变色描边 */
	}
  </style>

  <script>
    $(document).ready(function () {
      $('.show-more-btn').click(function () {
        // 1. 获取当前按钮所在的分组（通过closest找到最近的.image-group父元素）
        const $currentGroup = $(this).closest('.group-list');
        // 2. 获取当前分组内的图片容器
        const $imageContainer = $currentGroup.find('.group-img');
        // 3. 获取当前分组内所有隐藏的图片（默认显示的除外）
        const $hiddenImages = $imageContainer.find('.image-item:not(:nth-child(-n+8))');

        // 4. 切换图片显示状态
        if ($(this).hasClass('collapsed')) {
          // 展开状态：显示所有隐藏的图片
          $hiddenImages.show();
          // 切换按钮状态和文字
          $(this).removeClass('collapsed').addClass('expanded');
        } else {
          // 折叠状态：隐藏额外的图片
          $hiddenImages.hide();
          // 切换按钮状态和文字
          $(this).removeClass('expanded').addClass('collapsed');
        }
      });
		var swiper = new Swiper(".swiper-box", {
			slidesPerView: 4,
			spaceBetween: 30,
			slidesPerView: 'auto', // 必须设置为 auto 或具体数值

			// 响应式断点 - 修复问题的关键
			breakpoints: {
				// 超小屏幕
				0: {
					slidesPerView: 1,
					spaceBetween: 5,
				},
				// 小屏幕
				576: {
					slidesPerView: 2,
					spaceBetween: 8,
				},
				// 中等屏幕
				768: {
					slidesPerView: 3,
					spaceBetween: 10,
				},
				// 大屏幕
				992: {
					slidesPerView: 4,
					spaceBetween: 12,
				},
				// 超大屏幕
				1200: {
					slidesPerView: 5,
					spaceBetween: 15,
				}
			},
			// 导航按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			// 关键：添加观察者
			observer: true,
			observeParents: true,
			observeSlideChildren: true
		});
    });
  </script>
</body>

</html>
